<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
//默认不全选
const checked = ref('true');
import { cartListFn, updateCartFn, selectoneFn, selectallFn, removeCartFn, removeallCartFn } from '@/api/cart'

import type { Ref } from 'vue';
import type { iPro } from '@/types/homeType';

const cartList: Ref<Array<iPro>> = ref([])
const userid = localStorage.getItem('userid') || ''
const token = localStorage.getItem('token');
onMounted(() => {
  //购物车查看
  cartListFn({ userid, header: { token } }).then(res => {
    console.log('cart', res.data);
    cartList.value = res.data
    type.value = cartList.value.every(item => item.flag);
  })
})
//更新购物车方法
function latestCart() {
  //更新购物车
  cartListFn({ userid, header: { token } }).then(res => {
    console.log('更新购物车', res.data);
    cartList.value = res.data
  })
}

//单选
function selectClick(item: any) {
  //更新购物车数量
  updateCartFn({
    cartid: item.cartid,
    num: item.num,
    header: { token }
  }).then(res => {
    console.log('更新购物车数量', res);
    latestCart()
  })

  selectoneFn({
    cartid: item.cartid,
    flag: item.flag,
    header: { token }
  }).then(res => {
    console.log('单选', res);
    // 如果有一个商品未被选中，则全选状态变为 false
    type.value = cartList.value.every(item => item.flag);
    latestCart()
  })
}
const type: Ref<boolean> = ref(false)
//全选
function selectAllClick() {
  // type.value = !type.value
  selectallFn({
    userid,
    type: type.value,
    header: { token }
  }).then(res => {
    console.log('多选', res);
    console.log('type', type);

    cartList.value.forEach(item => {
      item.flag = type.value
    })


    //更新购物车
    latestCart()
  })
}
//删除单条购物车数据
function deleteClick(id: string) {
  removeCartFn({
    cartid: id,
    header: { token }
  }).then(res => {
    console.log('删除单条购物车', res);
    //更新购物车
    latestCart()
  })
}
//清空购物车
function deleteAll() {
  removeallCartFn({
    header: { token },
    userid
  }).then(res => {
    console.log('clearAll', res);
    latestCart()
  })
}

//总计
const totalPrice = computed(() => {
  let total: number = 0

  cartList.value.forEach(item => {
    if (item.flag) {
      total += ((item.originprice * item.discount * 0.1 * item.num))
    }

  })
  return total.toFixed(2)
})
</script>

<template>
  <main class="box">
    <header class="header">头部-购物车</header>
    <div class="content">
      <!-- <van-empty v-if="cartList.length==0" image="../../../public/cartNull.png" width="100%" image-size="80" description="购物车为空"></van-empty> -->


      <div class="proCart" v-for="item in cartList" :key="item.cartid" style="width: 100%" @click="selectClick(item)">
        <van-checkbox v-model="item.flag"> </van-checkbox>
        <van-swipe-cell>

          <van-card :num="item.num" :price="(item.originprice * item.discount * 0.1).toFixed(2)" desc="描述信息"
            :title="item.proname" :thumb="item.img1" class="goods-card">
            <template #footer>
              <van-button :disabled="(item.num <= 1)" @click="item.num--" size="small">-</van-button>
              <van-button @click="item.num++" size="small">+</van-button>
            </template>
          </van-card>

          <template #right>
            <van-button square text="删除" type="danger" class="delete-button" @click="deleteClick(item.cartid)" />
          </template>

        </van-swipe-cell>
      </div>
    </div>
  
     <van-action-bar>
      <van-checkbox v-model="type" @click="selectAllClick()">全选</van-checkbox>

      <span class="total"> 合计：￥{{ totalPrice }}元</span>
      <van-action-bar-button type="danger" text="提交订单" width="10%" />
      <van-button type="danger" round @click="deleteAll()" width="10%">清空购物车</van-button>
    </van-action-bar> 
  </main>
</template>
<style lang="scss" scoped>
.box {
  display: flex;
  flex-direction: column;

  .content {
    flex: 1;
    box-sizing: border-box;
    overflow: auto;

    .proCart {
      display: flex;
      padding-left: 10px;
      box-sizing: border-box;
      margin-bottom: 10px;
      border: 1px solid #ccc;
      border-radius: 15px;

      .van-swipe-cell {

        flex: 1;
      }
    }
  }

  .goods-card {
    margin: 0;
    background-color: #fff;
  }

  .delete-button {
    height: 100%;
  }

  .van-action-bar {
    position: fixed;
    bottom: 50px;
    display: flex;
    justify-content: space-around;
    padding-left: 10px;
    box-sizing: border-box;

    .total {
      flex: 1;
    }
  }
}
</style>